<template>
	<view>
		<view class="searchBox">
			<u-search shape="round" v-model="keyword" :showAction="true" actionText="搜索" @custom='onsearch'></u-search>
		</view>
		<view class="searchBoxbg"></view>
		<view class="mainBox">
			<view class="mainL">
				<view class="mainItem" @click="ckleft(item.id,index)" :class="ckitem==index?'mainItemCK':''"
					v-for="(item,index) in list" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="mainR">
				<view class="shopBox">
					<view class="shopItem" v-for="(item,index) in goodsList" :key="index">
						<navigator :url="'/pages/index/goodsDetils?id='+item.id">
							<image mode="aspectFill" :src="item.picUrl"></image>
							<view class="goods_name"><u--text :lines="1" :text="item.name"></u--text></view>
						</navigator>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				ckitem: 0,
				pageNo: 1,
				categoryId: '',
				keyword: '',
				goodsList: [],
				list: [{
						id: 1,
						name: '产品分类1'
					},
					{
						id: 2,
						name: '产品分类2'
					}
				]
			}
		},
		onLoad() {
			if (!uni.getStorageSync('accessToken')) {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			} else {
				this.API_LEFT();
			}
		},
		onReachBottom() {
			this.API_Right();
		},
		methods: {
			ckleft(id, index) {
				this.pageNo = 1;
				this.goodsList = [];
				this.ckitem = index;
				this.categoryId = id;
				this.API_Right();
			},

			API_LEFT() {
				var that = this;
				that.ran
					.request('/app-api/product/category/list_new', {
						"parentId": 38
					}, 'POST')
					.then(res => {
						console.log(res);
						if (res.code == 200) {

							that.list = res.data;
							that.categoryId = res.data[0].id;
							that.API_Right();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
			API_Right() {
				var that = this;
				var pageNo = that.pageNo;
				var categoryId = that.categoryId;
				var keyword = that.keyword;

				that.ran
					.request(
						'/app-api/product/spu-ht/page', {
							"pageNo": pageNo,
							"pageSize": 10,
							"categoryId": categoryId
						}, 'POST')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							if (res.data.list == '') {

							} else {
								that.goodsList = that.goodsList.concat(res.data.list);
								that.pageNo = that.pageNo + 1;
							}

							// that.goodsList = res.data.list;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
			onsearch(e) {
				this.keyword = e;
				this.API_Right();
			}
		}
	}
</script>
<style lang="scss">
	.mainBox {
		width: 750rpx;
		overflow: hidden;

		.mainR {
			width: 680rpx;
			padding: 20rpx 0 0 220rpx;

			.shopBox {
				overflow: hidden;

				.shopItem {
					width: 245rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					float: left;

					image {
						width: 245rpx;
						height: 245rpx;
					}

					.goods_name {
						padding: 0 10rpx;
					}
				}
			}
		}

		.mainL {
			width: 200rpx;
			height: calc(100vh - 110rpx);
			position: fixed;
			top: 110rpx;
			left: 0;
			overflow-y: scroll;
			background: #FFF;
			border-right: 1px solid #d6d7dc;

			.mainItem {
				padding-left: 10rpx;
				line-height: 90rpx;
				border-left: 10rpx solid #fff;
				border-bottom: 1px solid #d6d7dc;
			}

			.mainItemCK {
				border-left: 10rpx solid #000;
				font-weight: bold;
			}
		}
	}

	.searchBox {
		width: 700rpx;
		padding: 25rpx;
		background: #FFF;
		position: fixed;
		top: 0;
		left: 0;
		border-bottom: 1px solid #d6d7dc;
	}

	.searchBoxbg {
		width: 750rpx;
		height: 110rpx;
	}
</style>